<template>
	<view>
		<view class="topimg" v-if="showtopimg">
			<!-- 栏目图片 -->
			<view class="topdyimg" v-if="category.img_url">
				<image :src="category.img_url" mode="widthFix"></image>
			</view>
			<view class="topstaticimg" v-else>
				<image src="/static/biancheng.jpg" mode="widthFix"></image>
			</view>
		</view>

		<view class="cu-bar bg-blue light solid-bottom ">
			<view class="text-bold">
				<text class="cuIcon-titles text-orange "></text> {{category.title}}文章列表
			</view>
			<view class="action">
				<button class="cu-btn bg-orange shadow" @click="navToLanmu">所有栏目</button>
			</view>
		</view>
		<!-- 该栏目下的文章 -->
		<!-- 下拉刷新组件 -->
		<view class="content">
			<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh"
			 @setEnableScroll="setEnableScroll">
				<!-- 内容部分 -->
				<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" @scrolltolower="loadMore">

					<view v-for="(item, index) in article.newsList" :key="index" class="news-item" @click="navToDetails(item)">
						<text :class="['title', 'title'+item.type]">{{item.title}}</text>
						<view v-if="item.albums.length > 0" :class="['img-list', 'img-list'+item.type, item.albums.length === 1 && item.type===3 ? 'img-list-single': '']">
							<view v-for="(imgItem, imgIndex) in item.albums" :key="imgIndex" :class="['img-wrapper', 'img-wrapper'+item.type, item.albums.length === 1 && item.type===3 ? 'img-wrapper-single': '']">
								<image class="img" :src="imgItem"></image>
								<view class="video-tip" v-if="item.videoSrc">
									<image class="video-tip-icon" src=""></image>
								</view>
							</view>
						</view>

						<!-- 空图片占位 -->
						<view v-else class="img-empty"></view>
						<view :class="['bot', 'bot'+item.type]">
							<text class="author">{{item.user_name}}</text>
							<text class="time">{{item.add_time}}</text>
						</view>
						<view class="media-item-line" style="position: absolute;"></view>
					</view>
					<!-- 上滑加载更多组件 -->
					<mix-load-more :status="article.loadMoreStatus"></mix-load-more>
				</scroll-view>

			</mix-pulldown-refresh>
		</view>
	</view>
</template>

<script>
	import {
		friendlyDate
	} from '@/common/util.js';
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	let windowWidth = 0;

	export default {
		components: {
			mixPulldownRefresh,
			mixLoadMore
		},
		data() {
			return {
				category: {},
				categoryId: 292,
				enableScroll: true,
				showtopimg: false,
				article: //文章内容
				{
					newsList: [],
					loadMoreStatus: 0, //加载更多 0加载前，1加载中，2没有更多了
					refreshing: 0,
					requestParams: {
						page_index: 1,
						pagesize: 20
					}
				}
			}
		},
		async onLoad(options) {
			try {
				console.log('入参：' + options.query);
				this.categoryId = options.query;
			} catch (error) {
				console.log('异常来了');

			}

			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadCategoryInfo();
			this.loadNewsList('add');
		},
		onShareAppMessage() {
			let topimg = getApp().globalData.zyiz_share_img;
			return {
				title: this.category.title + '-' + getApp().globalData.title,
				content: this.category.title,
				path: '/pages/list/list?query=' + this.categoryId,
				imageUrl: topimg
			}
		},
		onShow: function() {
			// #ifdef  MP-BAIDU
			swan.showFavoriteGuide({
				type: 'bar',
				content: '关注找一找教程网小程序'
			});
			let categoryweb = {};
			var zyizurl = getApp().globalData.zyiz_domain + '/api/Zyiz/CategoryDetail/' + this.categoryId;
			uni.request({
				url: zyizurl,
				success: (result) => {
					if (result.statusCode == 200) {
						categoryweb = result.data.data;

						let desc = getApp().globalData.description;
						if (categoryweb.seo_description != '') {
							desc = categoryweb.seo_description;
						}
						let kw = getApp().globalData.keywords;
						if (categoryweb.seo_keywords != '') {
							kw = categoryweb.seo_keywords + ',' + getApp().globalData.keywords;
						}
						swan.setPageInfo({
							title: categoryweb.title + '-' + getApp().globalData.title,
							keywords: kw,
							description: desc,
							articleTitle: categoryweb.title + '-' + getApp().globalData.articleTitle,
							releaseDate: getApp().globalData.releaseDate,
							image: getApp().globalData.zyiz_image,
							video: ''
						});

					}

				}
			});

			// #endif

		},
		methods: {

			loadCategoryInfo() {

				console.log("loadCategoryInfo--");
				var zyizurl = getApp().globalData.zyiz_domain + '/api/Zyiz/CategoryDetail/' + this.categoryId;
				uni.request({
					url: zyizurl,
					success: (result) => {

						if (result.statusCode == 200) {

							this.category = result.data.data;
							uni.setNavigationBarTitle({
								title: this.category.title+'-找一找教程网'
							});
						}

					}
				});

			},
			//新闻列表
			loadNewsList(type) {

				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.article.loadMoreStatus === 2) {
						return;
					}
					this.article.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					this.article.refreshing = true;
				}
				// #endif
				var zyizurl = getApp().globalData.zyiz_domain + '/api/Zyiz/List/' + this.categoryId;
				console.log(zyizurl);
				console.log("开始请求参数：");
				console.log(this.article.requestParams);
				//开始请求数据
				uni.request({

					url: zyizurl,
					data: this.article.requestParams,
					success: (result) => {
						console.log(result);
						let list = result.data.data;
						if (type === 'refresh') {
							this.article.newsList = []; //刷新前清空数组
						}
						list.forEach(item => {
							item.add_time = friendlyDate(new Date(item.add_time.replace(/\-/g,
								'/')).getTime());
							if (item.img_url != '' && this.categoryId == 292) {
								item.albums.push(item.img_url);
								item.type = 3;
							}
							this.article.newsList.push(item);
						})
						if (result.data.page.has_next == false) {
							//没有更多的文章了
							this.article.loadMoreStatus = 2;
							console.log('没有更多文章拉啊');
						}

						//下拉刷新 关闭刷新动画
						if (type === 'refresh') {
							//this.article.requestParams.page_index = 1;
							this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
							// #ifdef APP-PLUS
							this.article.refreshing = false;
							// #endif
							this.article.loadMoreStatus = 0;
						}
						//上滑加载 处理状态
						if (type === 'add') {
							this.article.requestParams.page_index = this.article.requestParams.page_index + 1;

						}


					},
					fail: (err) => {
						console.log(err);

					},
					complete: (e) => {

					}
				});

			},
			//新闻详情
			navToDetails(item) {

				uni.navigateTo({
					url: '/pages/detail/detail?query=' + item.id
				})
			},
			//去栏目页
			navToLanmu() {
				uni.switchTab({
					url: '/pages/category/category'
				})

			},
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
		}
	}
</script>


<style lang='scss'>
	page,
	.content {
		background-color: #f8f8f8;
		height: 100%;
		overflow: hidden;
	}

	.topstaticimg {
		width: 750upx;

		image {
			width: 750upx;
		}
	}

	.content {


		.mix-loading-icon {
			display: none;
			;
		}

		/* 顶部tabbar */
		.nav-bar {
			position: relative;
			z-index: 10;
			height: 90upx;
			white-space: nowrap;
			box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
			background-color: #fff;

			.nav-item {
				display: inline-block;
				width: 150upx;
				height: 90upx;
				text-align: center;
				line-height: 90upx;
				font-size: 30upx;
				color: #303133;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 0;
					border-bottom: 4upx solid #007aff;
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					transition: .3s;
				}
			}

			.current {
				color: #007aff;

				&:after {
					width: 50%;
				}
			}
		}

		.swiper-box {
			height: 100%;
		}

		.panel-scroll-box {
			height: 100%;

			.panel-item {
				background: #fff;
				padding: 30px 0;
				border-bottom: 2px solid #000;
			}
		}

		/**
	 * 新闻列表 直接拿的nvue样式修改，,
	 * 一共需要修改不到10行代码, 另外px需要直接修改为upx，只有单位不一样，计算都是一样的
	 * 吐槽：难道不能在编译的时候把nuve中的upx转为px? 这样就不用修改单位了
	 */
		.video-wrapper {
			width: 100%;
			height: 440upx;

			.video {
				width: 100%;
			}
		}

		view {
			display: flex;
			flex-direction: column;
		}

		.img {
			width: 100%;
			/* height: 100%; */
		}

		.news-item {
			position: relative;
		}

		/* 修改结束 */

		/* 新闻列表  emmm 仅供参考 */
		.news-item {
			width: 750upx;
			padding: 24upx 30upx;
			border-bottom-width: 1px;
			border-color: #eee;
			background-color: #fff;
		}

		.media-item-line {
			position: absolute;
			left: 30upx;
			right: 30upx;
			bottom: 0;
			height: 1upx;
			background-color: #ebebeb;
		}

		.title {
			font-size: 32upx;
			color: #303133;
			line-height: 46upx;
		}

		.bot {
			flex-direction: row;
		}

		.author {
			font-size: 26upx;
			color: #aaa;
		}

		.time {
			font-size: 26upx;
			color: #aaa;
			margin-left: 20upx;
		}

		.img-list {
			flex-shrink: 0;
			flex-direction: row;
			background-color: #fff;
			width: 220upx;
			height: 140upx;
		}

		.img-wrapper {
			flex: 1;
			flex-direction: row;
			height: 140upx;
			position: relative;
			overflow: hidden;
		}

		.img {
			flex: 1;
		}

		.img-empty {
			height: 20upx;
		}

		/* 图在左 */
		.img-list1 {
			position: absolute;
			left: 30upx;
			top: 24upx;
		}

		.title1 {
			padding-left: 240upx;
		}

		.bot1 {
			padding-left: 240upx;
			margin-top: 20upx;
		}

		/* 图在右 */
		.img-list2 {
			position: absolute;
			right: 30upx;
			top: 24upx;
		}

		.title2 {
			padding-right: 210upx;
		}

		.bot2 {
			margin-top: 20upx;
		}

		/* 底部3图 */
		.img-list3 {
			width: 700upx;
			margin: 16upx 0upx;
		}

		.img-wrapper3 {
			margin-right: 4upx;
		}

		/* 底部大图 */
		.img-list-single {
			width: 690upx;
			height: 240upx;
			margin: 16upx 0upx;
		}

		.img-wrapper-single {
			height: 240upx;
			margin-right: 0upx;
		}

		.video-tip {
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .3);
		}

		.video-tip-icon {
			width: 60upx;
			height: 60upx;
		}
	}
</style>
